﻿@{
	Layout = null;
}
<!DOCTYPE html>
<html>
<head>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
	<script>
		var webSocket;

		function sendSocketMsg() {
			var msg = $("#msg").val();
			webSocket.send(msg);
			showMsg(msg, "blue");
		}

		function openSocket() {
			if (webSocket != null && typeof (webSocket) != "undefined") {
				closeSocket();
			}
			webSocket = new WebSocket("ws://" + location.hostname + ":" + location.port + "/api/msg");
			webSocket.onopen = function () {
				showMsg("连接建立");
			}
			webSocket.onerror = function () {
				showMsg("发生异常");
			}

			webSocket.onmessage = function (event) {
				showMsg(event.data, "yellow");
			}

			webSocket.onclose = function () { showMsg("连接关闭"); }
		}

		function closeSocket() {
			if (webSocket != null && typeof (webSocket) != "undefined") {
				webSocket.close();
			}
		}

		function showMsg(msg, type) {
			if (type === null || typeof (type) === "undefined") type = "gray";
			$("#show").append("<span class='" + type + "'>" + msg + "</span><br>");
		}
	</script>
	<style>
		#show {
			border: 1px solid #ff6a00;
			padding: 10px;
		}

		.blue {
			border: 1px solid #0094ff;
		}

		.yellow {
			margin-left: 300px;
			border: 1px solid #b6ff00;
		}

		.gray {
			font-size: 10px;
			border: 1px solid #a9a9a9;
		}
	</style>
</head>
<body>
	<button onclick="openSocket()">建立连接</button>
	<button onclick="closeSocket()">断开连接</button>
	<hr />
	<input type="text" id="msg" />
	<button onclick="sendSocketMsg()">发送信息</button>
	<hr />
	<div id="show"></div>
</body>
</html>